<template>
  <div class="goods">
    <div class="creat">
      <h1>商品介绍</h1>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品编号" prop="goodsSn">
          <el-input v-model="ruleForm.goodsSn" />
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="市场售价">
          <el-input v-model="ruleForm.retailPrice" />
        </el-form-item>
        <el-form-item label="是否新品">
          <el-radio v-model="ruleForm.isHot" label="true">新品</el-radio>
          <el-radio v-model="ruleForm.isHot" label="false">非新品</el-radio>
        </el-form-item>
        <el-form-item label="是否热卖">
          <el-radio-group v-model="ruleForm.isNew">
            <el-radio label="false">普通</el-radio>
            <el-radio label="true">热卖</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否在售">
          <el-radio-group v-model="ruleForm.isOnSale">
            <el-radio label="true">在售</el-radio>
            <el-radio label="false">未售</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.picUrl" :src="ruleForm.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="宣传画廊">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.picUrl" :src="ruleForm.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="商品单位">
          <el-input v-model="ruleForm.name" placeholder="件/个/盒" />
        </el-form-item>
        <el-form-item label="关键字">
          <el-button type="primary" icon="el-icon-plus">增加</el-button>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option
              v-for="item in optionsa[0]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :children="item.children"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属品牌商">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option
              v-for="item in options[0]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品简介">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="商品详细简介">
          <!-- 富文本 -->
        </el-form-item>
      </el-form>
    </div>
    <div class="gg">
      <h1>商品规格</h1>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="默认标准规格" name="first">
          <el-table style="width: 100%">
            <el-table-column prop="" label="规格名" />
            <el-table-column prop="" label="规格值" />
            <el-table-column prop="" label="规格图片" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="多规格支持" name="second">
          <el-table style="width: 100%">
            <el-table-column prop="" label="规格名" />
            <el-table-column prop="" label="规格值" />
            <el-table-column prop="" label="规格图片" />
            <el-table-column prop="" label="操作" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="kc">
      <h1>商品库存</h1>
      <el-table style="width: 100%">
        <el-table-column prop="" label="货品规则" width="1200px" />
        <el-table-column prop="" label="货品售价" />
        <el-table-column prop="" label="货品数量" />
        <el-table-column prop="" label="货品图片" />
        <el-table-column prop="" label="操作" />
      </el-table>
    </div>
    <div class="cs">
      <h1>商品参数</h1>
      <el-button type="primary">添加</el-button>
      <el-table style="width: 100%">
        <el-table-column prop="" label="商品参数名称" />
        <el-table-column prop="" label="商品参考值" />
        <el-table-column prop="" label="操作" />
      </el-table>
    </div>
    <div class="button">
      <el-button @click="handleF">取消</el-button>
      <el-button type="primary" @click="handleAdd">上架</el-button>
    </div>
  </div>
</template>
<script>
import { listCatAndBrand } from '@/api/goods'
export default {
  data() {
    return {
      options: [],
      optionsa: [],
      activeName: 'first',
      // 第一个上传按钮
      imageUrl: '',
      // 第二个上传按钮
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        goodsSn: '',
        name: '',
        isHot: 'true',
        isNew: 'false',
        isOnSale: 'true',
        picUrl: '',
        resource: '',
        desc: ''
      },
      rules: {
        goodsSn: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.handleLsh()
  },
  methods: {
    // 调接口
    handleLsh() {
      listCatAndBrand().then((response) => {
        console.log(response.data.data, '下拉框')
        this.options.push(response.data.data.brandList)
        this.optionsa.push(response.data.data.categoryList)
        console.log(this.optionsa[0], '567')
        console.log(this.$route.query, '22222')
        if (this.$route.query.row) {
          this.ruleForm.goodsSn = this.$route.query.row.id
          this.ruleForm.name = this.$route.query.row.name
          this.ruleForm.isHot = this.$route.query.row.isHot
          this.ruleForm.isNew = this.$route.query.row.isNew
          this.ruleForm.isOnSale = this.$route.query.isOnSale.isOnSale
        }
      })
    },
    // 取消
    handleF() {
      this.$router.push({
        path: 'list'
      })
    },
    // 上架
    handleAdd() {
      this.$router.push({
        path: 'list',
        query: {}
      })
    },
    // 表单俩按键
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 第一个上传啊按钮
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 第一个上传按钮结束
    // 第二个上传啊按钮
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 第二个上传按钮结束
    // 选项卡
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.creat ::v-deep {
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container {
    border-bottom: 1px solid #ccc;
  }
  #editor-container {
    height: 500px;
  }
  border: 1px solid #ebe5e5;
  box-shadow: 0 0 2px 1px #e3e0e0;
  margin: 20px;
  padding: 20px;
  h1 {
    font-size: 20px;
  }
  // 第一个上传按钮
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  // 第一个上传按钮结束
}
.gg ::v-deep {
  border: 1px solid #ebe5e5;
  box-shadow: 0 0 2px 1px #e3e0e0;
  margin: 20px;
  padding: 20px;
  h1 {
    font-size: 20px;
  }
  // .el-tabs {
  //   .el-tabs__item:hover {
  //     background: #409eff;
  //     color: #fff;
  //   }
  // }
}
.kc ::v-deep {
  border: 1px solid #ebe5e5;
  box-shadow: 0 0 2px 1px #e3e0e0;
  margin: 20px;
  padding: 20px;
  h1 {
    font-size: 20px;
  }
}
.cs ::v-deep {
  border: 1px solid #ebe5e5;
  box-shadow: 0 0 2px 1px #e3e0e0;
  margin: 20px;
  padding: 20px;
  h1 {
    font-size: 20px;
  }
}
.button {
  margin: 20px;
}
</style>
